<template>
  <div class="container">
    <div class="form">
      <van-checkbox-group v-model="checkboxGroup" ref="checkboxGroup">
        <van-checkbox name="1" shape="square" class="form-checkbox">
          <span class="license-link">《平安银行橙e网个人会员服务协议》</span>
        </van-checkbox>
        <van-checkbox name="2" shape="square" class="form-checkbox">
          <span class="license-link">《平安银行个人征信授权书》</span>
        </van-checkbox>
        <van-checkbox name="3" shape="square" class="form-checkbox">
          <span class="license-link">《数字账户用户服务协议》及《数字账户隐私政策》</span>
        </van-checkbox>
        <van-checkbox name="4" shape="square" class="form-checkbox" @click="selectAll">
          全选
        </van-checkbox>
      </van-checkbox-group>
    </div>

    <servicer style="bottom: 20%"/>
    <div
      class="loan-btn"
      :class="{ active: checkboxGroup.length >= 1 }"
      @click="toNext"
    >
      签署协议
    </div>
  </div>
</template>

<script>
import Servicer from '@/components/Servicer'

export default {
  components: {
    Servicer
  },
  data () {
    return {
      checkboxGroup: []
    }
  },
  mounted () {},
  methods: {
    toNext () {
      if (!this.checkboxGroup.length) return

      this.$toast({
        msg: '正在匹配融资方案，请稍等'
      })
      setTimeout(() => {
        this.$router.push({
          path: '/match'
        })
      }, 1500)
    },
    selectAll () {
      this.$refs.checkboxGroup.toggleAll(true)
    }
  }
}
</script>

<style lang="less" scoped>
.form {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  line-height: 40px;
  text-align: left;
  /deep/ .van-checkbox__label {
    color: #ffffff;
  }

  .form-checkbox {
    margin-top: 34px;

    .license-link {
     text-decoration: underline;
    }
  }
}

.loan-btn {
  position: fixed;
  bottom: 10%;
  left: 50%;
  display: block;
  margin: 42px 0 0 -96px;
  width: 192px;
  height: 70px;
  line-height: 70px;
  // border: 1px solid #ccc;
  background-image: url("../assets/images/loan/btn.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: none;
  color: ccc;
  font-size: 20px;

  &.active {
    color: #fff;
    background-image: url("../assets/images/loan/btn_active.png");
  }
}
</style>
